<div class="card {{route_class()}}">
    <div class="card-header">
        发表课程
    </div>
    <div class="card-body">
        <div class="form-group">
            <label>课程名称</label>
            <input type="text" name="title" class="form-control" value="{{$lesson['title']??''}}">
        </div>
        <div class="form-group">
            <label>预览图</label>
            <div class="input-group mb-1">
                <input class="form-control" name="preview" readonly="" value="{{$lesson['preview']??''}}">
                <div class="input-group-append">
                    <button onclick="upImagePc(this)" class="btn btn-secondary" type="button">单图上传</button>
                </div>
            </div>
            <div style="display: inline-block;position: relative;">
                <img src="{{$lesson['preview']??''}}" class="img-responsive img-thumbnail" width="150">
                <em class="close" style="position: absolute;top: 3px;right: 8px;" title="删除这张图片"
                    onclick="removeImg(this)">×</em>
            </div>
        </div>
        <div class="form-group">
            <label for="">置顶</label>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="is_top" id="inlineRadio1" value="1"
                        {{active_class($lesson['is_top']==1,'checked')}}>
                <label class="form-check-label" for="inlineRadio1">是</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="is_top" id="inlineRadio2" value="0"
                        {{active_class($lesson['is_top']==0,'checked')}}>
                <label class="form-check-label" for="inlineRadio2">否</label>
            </div>
        </div>
        <div class="form-group">
            <label>课程简介</label>
            <textarea type="text" name="description" class="form-control">{{$lesson['description']}}</textarea>
        </div>
    </div>
</div>
<div class="card {{route_class()}}">
    <div class="card-header">
        视频管理
    </div>
    <div class="card-body">
        <div class="card video" v-for="(video,index) in videos">
            <span class="fe fe-x-circle mr-4" @click="delVideo(index)"></span>
            <div class="card-body">
                <div class="form-group">
                    <input type="text" v-model="video.title" class="form-control" placeholder="请输入视频名称">
                </div>
                <div class="form-group">
                    <input type="text" v-model="video.path" class="form-control" placeholder="视频播放地址">
                </div>
            </div>
        </div>
    </div>
    <textarea name="videos" cols="30" rows="10">@{{ videos }}</textarea>
    <div class="card-footer text-muted">
        <button type="button" class="btn btn-light btn-sm" @click="addVideo">添加视频</button>
        <button class="btn btn-primary btn-sm">保存发布</button>
    </div>
</div>
@push('js')
    <script>
        function upImagePc() {
            require(['hdjs'], function (hdjs) {
                hdjs.image(function (images) {
                    //上传成功的图片，数组类型
                    $("[name='preview']").val(images[0]);
                    $(".img-thumbnail").attr('src', images[0]);
                })
            });
        }
    </script>
@endpush
@push('js')
    <script>
        require(['vue'], function (vue) {
            new vue({
                el: "#app",
                data: {
                    videos: {!! isset($lesson)?json_encode($lesson->videos->toArray()) :"[{title: '', path: ''}]"!!}
                },
                methods: {
                    addVideo() {
                        this.videos.push({title: '', path: ''});
                    },
                    //删除视频
                    delVideo(index) {
                        this.videos.splice(index, 1);
                    }
                }
            })
        })
    </script>
@endpush